<template>
  <div class="bg-box">
    <div id="myAccount">
      <div class="back">
        <h1 class="title">修改密码</h1>
      </div>
      <div class="content">
<!--        <div class="account-wrap">
          <h6>个人资料</h6>
          <ul class="personal-info">
            <li>
              <span class="leftC">用户名：</span><span>{{ register.name }}</span>
            </li>
          </ul>
        </div>-->
        <div class="account-wrap">
          <h6>修改密码</h6>
          <el-form
            ref="ruleFormRef"
            :model="data.ruleForm"
            status-icon
            :rules="data.rules"
            label-width="120px"
            label-position="left"
            class="setpassword"
          >
            <el-form-item label="新密码：" prop="pass">
              <el-input
                v-model="data.ruleForm.pass"
                type="password"
                autocomplete="off"
                show-password
              />
            </el-form-item>
            <el-form-item label="确认密码：" prop="checkPass">
              <el-input
                v-model="data.ruleForm.checkPass"
                type="password"
                autocomplete="off"
                show-password
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { validPassword } from "~/utils/common/validation.js";
import { ref, reactive, onMounted } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { req_getSystemUsers, req_setUserPassword } from "~/utils/axios/index.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const register = JSON.parse(sessionStorage.getItem("register"));
let $router = useRouter();
const ruleFormRef = ref();
const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (data.ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== data.ruleForm.pass) {
    callback(new Error("两次输入的密码不一致！"));
  } else {
    callback();
  }
};
const data = reactive({
  name: "",
  userId: "",
  myInfo: {
    name: "",
    stuffName: "",
  },
  ruleForm: {
    pass: "",
    checkPass: "",
  },
  rules: {
    pass: [
      { validator: validatePass, trigger: "blur" },
      { validator: validPassword, trigger: "blur" },
    ],
    checkPass: [{ validator: validatePass2, trigger: "blur" }],
  },
});
onMounted(() => {
  getMyInfo();
});
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      req_setUserPassword({ passwordHash: data.ruleForm.pass }).then((res) => {
        if (res.status === 200) {
          ElMessage({
            type: "success",
            message: "密码修改成功",
          });
          data.ruleForm.pass = "";
          data.ruleForm.checkPass = "";
          $router.push("/login");
        }
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const getMyInfo = () => {
  req_getSystemUsers().then((res) => {
    if (res.status === 200) {
      data.myInfo.name = res.data.users.length !== 0 ? res.data.users[0].name : "root";
      data.myInfo.stuffName =
        res.data.users.length !== 0 ? res.data.users[0].stuffName : "root";
    }
  });
};
</script>

<style lang="scss" scoped>
#myAccount {
  .back {
    display: flex;
    align-items: center;
    margin: 15px 0;

    span {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }

  .account-wrap {
    background-color: #fff;
    margin-top: 10px;

    h6 {
      padding: 12px 15px;
      font-size: 16px;
      font-weight: 400;
      background-color: #eee;
    }

    .personal-info {
      padding: 15px 20px;

      li {
        display: flex;
        align-items: center;
        margin: 5px 0;

        span {
          font-size: 14px;
        }

        .leftC {
          display: inline-block;
          width: 120px;
        }
      }
    }
  }

  .setpassword {
    padding: 20px 20px 1px;

    :deep(.el-form-item) {
      width: 35%;
      margin-bottom: 30px;
    }

    :deep(.el-input) {
      width: 70%;
    }

    :deep(.el-button) {
      border-radius: 0;
      padding: 8px 30px;
      background-color: #671f68;
    }
  }
}
</style>
